<template>
  <div>
  <div class="zixun-concent">
          <div class="zixun-title">
            <div style="display: flex;align-items: center;">
                   <div style="display: flex;justify-content:center;flex-direction:column;position: relative;margin-right:.9375rem" v-for="(item,index) in titles" :key="index">
          <div style="font-size:.9375rem;color: #333;" @click="getNewssss(index)"   :class="{active: index === titleType}">{{item}}</div>
          <div v-if="titleType==index" class="xuanzhongdian"></div>
        </div>
            </div>

         <van-field  @click="getsearch"  left-icon="search" v-model="value"  placeholder="请输入关键词搜索" style="width:70%;border-radius:1.0625rem;background-color:#7B7D8014;height:1.875rem;line-height:0.875rem;" />
       </div>
         <Quanzi v-if="titleType==0" />
        <Luntan v-if="titleType==1" />
          <Huati v-if="titleType==2" />
  </div>
  <BottomTab  :types=2 />
</div>
</template>

<script>
import Quanzi from '~/components/guangchang/quanzizujian.vue';
import Luntan from '~/components/guangchang/luntanzujian.vue';
import Huati from '~/components/guangchang/huatizujian.vue';
  import BottomTab from '~/components/footer.vue';
export default {
      components: {
        Quanzi,
        Luntan,
        Huati,
        BottomTab
  },
         data() {
            return {
              value: '',
              titles: ['圈子', '论坛'],
              titleType:0,
              telimages:['https://img01.yzcdn.cn/vant/apple-1.jpg','https://img01.yzcdn.cn/vant/apple-2.jpg','https://img01.yzcdn.cn/vant/apple-3.jpg']
            }
         },
         mounted() {
          const type = this.$route.query.type;
          if (type==1) {
            this.titleType=1;
          }
            
          },  
         methods: {
            getNewssss(index){
                this.titleType=index;
            },
            getsearch(){
  window.location.href = `${this.$domain}/m/index/search.php`;
},
         }
}
</script>
<style>
   body {
  background: #F7F8FA !important;
  font-size: 16px; /* 默认字体大小 */
   }</style>
<style scoped>

  .zixun-concent{
      margin: .9375rem;
  }
    .zixun-title{
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
.xuanzhongdian {
  width: .375rem;
  height: .375rem;
  margin: 0 auto;
  background: #ff7500;
  box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
  border-radius: 50%; /* Simplify border-radius */
  position: absolute;
  left: 35%;
  bottom: -25%;
}
.active {
  font-weight: bold;
  font-size: 1.0625rem;
}
.guanzhu{
width: 4.125rem;
height: 1.625rem;
border-radius: 4.25rem;
border: 1px solid #2E3033;
text-align: center;
line-height: 1.625rem ;
font-weight: bold;
margin-left: 4rem;
}
.truncate {
  color:#47494DFF;
  font-size: .9375rem;
  width: 100%;
  margin-top: .8125rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示最多两行 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 1.5; /* 根据需要调整行高 */
}
/deep/.van-field__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
   margin-block-start: -2px
}
</style>